<template>
    <div class="jzdItem">
			<draggable v-model="jzd" v-bind="{group:'item'}" handle=".jzd-handle">
				<el-row v-for="(item,i) in jzd" :key="i">
					<el-col :span="10">
						<el-form-item style="margin-bottom:3px !important">
							<el-input v-model="item.key" placeholder="选项名称"/>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item style="margin-bottom:3px !important">
							<el-input style="position:relative;left:5px;" v-model="item.val" placeholder="选项值"/>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-button type="danger" size="mini" style="position:relative;left:15px"  icon="el-icon-close" @click="deleteItem(i)"></el-button>
						<el-button class="jzd-handle" type="success" size="mini" style="position:relative;left:15px" icon="el-icon-rank"></el-button>
					</el-col>
				</el-row>
			</draggable>
			<div>
				<el-button type="info" icon="el-icon-plus" style="padding:5px 7px" size="mini" @click="addItem">追加</el-button>
				<el-button v-if="jzd.length > 0" type="warning" icon="el-icon-delete" style="padding:5px 7px" size="mini" @click="clearItem">清空</el-button>
			</div>
		</div>
</template>
<script>
import draggable from "vuedraggable"
export default {
    components:{
		draggable,
	},
    props: {
		item:{
            type: Array,
        },
	},
	watch:{
		jzd(){
			this.$emit('update:item',this.jzd)
		},
	},
	data(){
		return{
			jzd:this.item
		}
	},
	methods: {
		addItem(){
			this.jzd.push({})
		},
		deleteItem(index){
			this.jzd.splice(index,1)
		},
		clearItem(){
			this.jzd = []
		},
	}
    
};
</script>